<template>
	<view class="pay_box box">
		<view class="pay_container">
			<view class="myElectricityMeter_container_pay">
				<view class="myElectricityMeter_container_pay_detail">
					<view class="myElectricityMeter_container_pay_detail_title">
						电表状态
					</view>
					<view class="myElectricityMeter_container_pay_detail_container">
						<view class="myElectricityMeter_container_pay_detail_container_box">
							<view class="myElectricityMeter_container_pay_detail_container_box_item">
								房间号：{{showData.roomNumber}}
							</view>
							<view class="myElectricityMeter_container_pay_detail_container_box_item">
								可用余额:{{showData.money}}
							</view>
							<view class="myElectricityMeter_container_pay_detail_container_box_item">
								电表状态:{{showData.status}}
							</view>
						</view>
						<view class="myElectricityMeter_container_pay_detail_container_right">
							》
						</view>
					</view>
				</view>
			</view>
			<view class="chose_pay_money">
				<view class="chose_pay_money_title" style="margin-top: 60rpx;">
					充值金额
				</view>
				<view class="chose_pay_money_items" style="margin-top: 20rpx;">
					<view :class="choseMoneyId==index?'active':''" v-for="(item,index) in moneyArr"
						@click="choseMoneyMethod(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="" style="margin-top: 60rpx;">
					预计1小时内下发到表，受网络等因素影响可能会有延迟请耐心等待，如有疑问请联系工作人员。
				</view>
			</view>
			<view class="pay_btn">
				<button @click="gotoPay">立即充值</button>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="充值金额" v-model="totalFee" placeholder="请输入充值金额"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getStorage
	} from "../../utils/storage.js"
	import {
		callWxPay
	} from "../../api/request.js"
	export default {
		data() {
			return {
				moneyArr: [{
					val: 50,
					name: "50元"
				}, {
					val: 100,
					name: "100元"
				}, {
					val: null,
					name: "其他金额"
				}],
				choseMoneyId: 0,
				totalFee: 50,
				showData: null,
				subOpenid: null,
				subAppid: 'wx46a5cad1264ae343',
				schoolUserId: null,
				title: "标题",
				payChanneId: 811314
			};
		},
		async onLoad() {
			let openId = await getStorage({
				key: 'openId'
			})
			let dormitoryId = await getStorage({
				key: 'dormitoryId'
			})
			let userInfoId = await getStorage({
				key: 'userInfoId'
			})
			this.subOpenid = openId
			this.schoolUserId = userInfoId
			this.dormitoryId = dormitoryId
			this.title = `宿舍号${dormitoryId} 缴费 ${this.totalFee}`
			this.moneyType = getApp().globalData.moneyType
			this.showData = {
				status: getApp().globalData.status || '',
				money: getApp().globalData.money || 0,
			}
		},
		methods: {
			async gotoPay() {
				let res = await callWxPay({
					"dormitoryId": this.dormitoryId,
					"moneyType": this.moneyType,
					"payChanneId": '811314',
					"schoolUserId": this.schoolUserId,
					"subAppid": this.subAppid,
					"subOpenid": this.subOpenid,
					"title": this.title,
					"totalFee": this.totalFee
				})
				uni.showLoading({
					title: "正在发起支付"
				})
				const {
					PayNonceStr,
					PaySign,
					PayPackage,
					PayTimeStamp
				} = res.data
				console.log(res.data, PayNonceStr, PaySign, PayPackage, PayTimeStamp);
				// console.log(res.data, PayNoncestr);
				wx.requestPayment({
					"timeStamp": PayTimeStamp,
					"nonceStr": PayNonceStr,
					"package": PayPackage,
					"signType": "MD5",
					"paySign": PaySign,
					"success": function(res) {
						console.log(res);
						uni.hideLoading()
					},
					"fail": function(res) {
						console.log(res);
						uni.hideLoading()
						uni.showToast({
							icon: "error",
							title: "支付失败"
						})
					},
					"complete": function(res) {
						console.log(res);
					}
				})
			},
			dialogInputConfirm(e) {
				console.log(e);
				this.totalFee = e * 1
				this.$refs.inputDialog.close()
				console.log(this.totalFee);
			},
			choseMoneyMethod(item, index) {
				console.log(item, index);
				if (index == 2) {
					this.$refs.inputDialog.open()
				} else {
					this.totalFee = item.val
					this.choseMoneyId = index
				}
			}
		}
	}
</script>

<style lang="scss">
	.pay_container {
		width: 90%;
		margin: auto;
	}

	.pay_btn {
		width: 90%;
		margin: auto;
		border-radius: 20rpx;
		position: fixed;
		bottom: 10rpx;
		left: 0;
		right: 0;

		button {
			background-color: #259CFF;
			color: white;
			text-align: center;
		}
	}

	.chose_pay_money {
		display: flex;
		flex-direction: column;

		.chose_pay_money_title {
			color: #C3BCBC;
		}

		.chose_pay_money_items {
			display: flex;
			justify-content: space-between;

			view {
				padding: 20rpx 40rpx;
				border: 1px solid #E9E9E9;
				border-radius: 12rpx;
			}

			.active {
				border: 1px solid #2461FF;
			}
		}
	}

	.myElectricityMeter_container_pay {
		border: 1px solid rgba(189, 189, 189, 1);
		margin-bottom: 20rpx;

		.myElectricityMeter_container_pay_detail {
			display: flex;
			flex-direction: column;

			.myElectricityMeter_container_pay_detail_title {
				background: #2F3141;
				color: white;
				padding: 30rpx;
				border-top-right-radius: 30rpx;
				border-top-left-radius: 30rpx;
			}

			.myElectricityMeter_container_pay_detail_container {
				display: flex;
				justify-content: space-between;

				.myElectricityMeter_container_pay_detail_container_box {
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: 16rpx;

					.myElectricityMeter_container_pay_detail_container_box_item {
						margin-bottom: 20rpx;
					}
				}

				.myElectricityMeter_container_pay_detail_container_right {
					display: flex;
					align-items: center;
				}
			}

			.myElectricityMeter_container_pay_detail_pay {
				background-color: #FF99D3;
				text-align: center;
				padding: 16rpx 26rpx;
				color: white;
				width: 120rpx;
				margin: auto;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>